<template>
  <section>
    <el-form label-width="100px" size="mini">
      <el-form-item label="地址：">
        <el-button size="mini" type="primary" @click="orderAddressDialog=true">添加地址</el-button>
      </el-form-item>
      <el-form-item label="订单金额：">¥{{orderForm.totalPrice.toFixed(2)}}</el-form-item>
      <el-form-item label="优惠金额：">
        <el-input size="mini" v-model="orderForm.salePrice" style="width:200px"/>
      </el-form-item>
      <el-form-item label="实付金额：">
        ¥{{(orderForm.totalPrice-orderForm.salePrice).toFixed(2)}}
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="primary" @click="subOrderBtn">提交订单</el-button>
      </el-form-item>
    </el-form>

    <el-dialog  title="选择地址" :visible.sync="orderAddressDialog">
      <order-adress :address="orderForm.data.address" v-on:submit="getAddress"></order-adress>
    </el-dialog>
    <el-dialog  title="订单支付" :visible.sync="orderPay" v-if="orderId">
      <order-pay :orderId="orderId" v-on:cancel="orderPay=false"></order-pay>
    </el-dialog>
  </section>
</template>

<script>
  import orderAdress from '@/common/getAddress'
  import orderPay from '../orderManagement/orderPay'
  import { mapActions,mapGetters} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "orderSale",
    props:['orderForm','orderItemsForm'],
    components:{orderPay,orderAdress},
    data() {
      return {
        orderPay:false,
        orderId:null,
        orderAddressDialog:false
      }
    },
    watch:{
      orderForm(nv,ov){
        console.log('看下订单变动----------',nv)
        if(nv)
          this.init(nv)
      },
      orderItemsForm(nv,ov){
        console.log('订单项会变动么？？？')
      }
    },
    created(){
      console.log('看下订单----------',this.orderForm,this.orderItemsForm)
      this.init(this.orderForm)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(order){
        if(order.salePrice === undefined){
          Vue.set(order,'salePrice',0)
        }
      },
      getAddress(e){
        console.log('观测一下地址----------',this.orderForm)
        this.orderAddressDialog=false
      },
      subOrderBtn(){
        let orderItems = this.makeItems(this.orderItemsForm)
        let data={
          orderItems,
          memberId:this.orderForm.memberId,
          title:this.orderForm.title,
          departmentId:this.orderForm.departmentId,
          salePrice:this.orderForm.salePrice,
          data:this.orderForm.data
        }
        console.log('提交的参数-------',data)
        // return
        this.createOrderByManager(data)
      },
      makeItems(items){
        let orderItems=[]
        for(let i=0;i<items.length;i++){
          let item=items[i]
          if(item.data.needCustomerId){
            if(item.num > item.customerIds.length || item.customerIds === undefined){
              this.$message({type:'error',message:'请确定所需用户数量！'})
              return
            }
          }
          if(item.data.needAddress){

          }
        }
        items.forEach(item=>{
          let tmp={
            title:item.title,
            skuId:item.skuId,
            price:item.price,
            props:item.props,
            sn:item.sn,
            data:item.data,
            num:item.num,
          }
          if(item.data.needCustomerId) tmp.customerIds=item.customerIds
          orderItems.push(tmp)
        })
        console.log('item--------',orderItems)
        return JSON.stringify(orderItems)
      },
      createOrderByManager(data){
        this.fetch({name:"createOrderByManager",data:data})
          .then(res=>{
            console.log('创建订单byAdmin——————————',res)
            this.$message({type:'success',message:'创建成功！'})
            this.orderId=res.id
            this.orderPay=true
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
